<template>
  <div>
    <button @click='flag = !flag'>切换</button>
    <transition 
    @before-enter="EnterFrom" 
    @enter="EnterActive" 
    @after-enter="EnterTo"
    @enter-cancelled="EnterCancel" 
    @before-leave="LeaveFrom" 
    @leave="Leave" 
    @after-leave="LeaveTo"
    @leave-cancelled="LeaveCancel"
    >
      <div v-if='flag' class="box"></div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { gsap } from "gsap";
const flag = ref(true)

const EnterFrom = (el: Element) => {
  gsap.set(el,{
    width:0,
    height:0
  })
}

const EnterActive = (el: Element,done:gsap.Callback) => {
  gsap.to(el,{
    width:200,
    height:200,
    onComplete:done
  })
}

const EnterTo = (el: Element) => {
    gsap.set(el,{
    width:0,
    height:0
  })
}

const EnterCancel = (el: Element) => {

}

const LeaveFrom = (el: Element) => {

}

const Leave = (el: Element) => {

}

const LeaveTo = (el: Element) => {

}

const LeaveCancel = (el: Element) => {

}
</script>


<style scoped lang="less">
//开始过度
.fade-enter-from {
  background: red;
  width: 0px;
  height: 0px;
  transform: rotate(360deg)
}

//开始过度了
.fade-enter-active {
  transition: all 2.5s linear;
}

//过度完成
.fade-enter-to {
  background: yellow;
  width: 200px;
  height: 200px;
}

//离开的过度
.fade-leave-from {
  width: 200px;
  height: 200px;
  transform: rotate(360deg)
}

//离开中过度
.fade-leave-active {
  transition: all 1s linear;
}

//离开完成
.fade-leave-to {
  width: 0px;
  height: 0px;
}
</style>